<%@ page language="java" pageEncoding="UTF-8"  %>
<%@ taglib prefix="fmt" uri="/WEB-INF/tlds/fmt.tld"%>
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld" %>
<%
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires",    0);
response.flushBuffer();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>ProjectSample Extjs</title>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/resources/img/favicon.ico" />
<style type="text/css">
.shadow {
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=7);/*for ie6,7,8*//*Strength 阴影高度 */
	-moz-box-shadow: 0 5px 8px #ccc;
	-webkit-box-shadow: 0 5px 8px #ccc;
	box-shadow: 0 5px 8px #ccc;
}

/*FFD336 呢个颜色好正*/

.draft {
	background-color: #FFD336;
	border-bottom: 1px solid #F3B249;
	font-size: 15px;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	height: 40px;
	width: 100%;
	font-weight:bold;
	font-family:"Arial";
	/*padding-top: 10px;*/
}
.draft div {
	padding: 8px 8px;
}

.draftleg {
	background-color: #F3B249;
	border-top: 1px solid #F3B249;
	font-size: 15px;
	color:#808080;
	text-align: right;
	position: fixed;
	bottom: 0;/*右下角*/
	right: 0;
	height: 40px;
	width: 100%;
	font-weight:bold;
	font-family:"Arial";
}
.draftleg a{
	text-decoration:none;
	color:#808080;
}

.draftleg a:hover{
	color:#808080;
	text-decoration:underline;
}

    #loading-mask{
        background-color:#e4ede6;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        z-index:20000;
    }

.draftR {
	background-color: #F3B249;
	border-left: 1px solid #F3B249;
	border-bottom: 1px solid #F3B249;
	border-right: 1px solid #F3B249;
	border-top: 1px solid #F3B249;
	font-size: 15px;
	text-align: left;
	position: fixed;
	top: 55px;
	right: 30px;
	height: 65%;
	width: 50%;
	color:#00ec00
	/*font-weight:bold;*/
	font-family:"Arial";
	/*padding-top: 10px;*/
}
.draftR div {
	background-color: #000000;
	padding: 8px 8px;
	margin: 10px 10px;
	color: #00ec00;
	height: 40%;
}

.testcase {

border: 2px solid #F3B249;
width: 45%
}
.testcase-h {
color: #FFFFFF;
background-color:#F3B249 ;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px
}

.testcase-c {
padding: 10px 10px;
}

    #loading{
        height:auto;
        position:absolute;
        left:45%;
        top:40%;
        padding:2px;
        z-index:20001;
    }
    #loading a {
        color:#225588;
    }
    #loading .loading-indicator{
       /* background:white;*/
        color:#444;
        font:bold 13px Helvetica, Arial, sans-serif;
        height:auto;
        margin:0;
        padding:10px;
    }
    #loading-msg {
        font-size: 10px;
        font-weight: normal;
    }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>

<div id="loading-mask" style=""></div>

<div id="loading">
    <div class="loading-indicator"><img src="${pageContext.request.contextPath}/resources/img/extanim32.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>Project Sample For Ext JS 4.0 - <a href="http://www.sencha.com">link-wings.com</a><br /><span id="loading-msg">Loading styles and images...</span></div>
</div>

        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/js/extjs4.0b3/resources/css/ext-all.css" />

        <!--
        <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.0-beta3/resources/css/ext-all.css" />
		-->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...'; </script>

        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/extjs4.0b3/ext-all.js"></script>
        <!--
         <script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.0-beta3/ext-all-debug.js"></script>
		 -->
		  <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core4j2.0...'; </script>
		 <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/Core4js2.0.js"></script>

        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>

<!-- 	swfupload
		<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading SWFUpload Components...';</script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/swfupload_v250b3/swfupload.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/swfupload_v250b3/swfupload.queue.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/swfupload_v250b3/swfupload.speed.js"></script>
-->
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>

		<script type="text/javascript">




		Ext.onReady(function(){
			/*Ext.get("loading-mask").slideOut(
                    "t",//指定方向  "t"=top,"b"=buttom,"l"=left,"r"=right
                    {
                         easing: 'easeOut',//动画方式
                         duration:.3,//持续时间
                         remove: true,//false -不从DOM中删除,默认是设置该元素隐藏(visibility = 'hidden')
                                       //ture - 从DOM中删除该元素
                         useDisplay: true//还不太清楚可能是 是否显示该元素所占位置
                    }
                )*/

            /*setTimeout(
                        function(){
             },5000);*/

             Ext.removeNode(Ext.getDom("loading"));
             Ext.get('loading-mask').highlight().fadeOut({remove:true});
			//Ext.removeNode(Ext.getDom("loading-mask"));

			});


			/*
			有兴趣还可以试一下MessageBox的动画效果
			Js代码 复制代码

   		 var a = new Ext.Element("id");
   		 Ext.MessageBox.show({
   		      title : a.dom.tagName,//massagebox标题
   		      msg : a.dom.innerHTML,//信息内容
   		      buttons : Ext.MessageBox.OK,//按钮组合
   		      icon : Ext.MessageBox.INFO,//图标
   		      animEl : a//消息框从元素a弹出
        });

			*/



	   </script>


<div id="title-show" class="draft shadow">

<table border="0" cellpadding="0" width="100%">
<tr >
        <td style="width:20%;padding-left: 10px" align="left">
        <a href="http://www.link-wings.com" target="_blank"><img src="${pageContext.request.contextPath}/resources/img/logo-1.png" style=""/></a>
        </td>
        <td id="pj-title" style="padding-top: 6px;width:60%;">
        PROJECTSAMPLE - <span id="pj-title-loc">INDEX</span>
        </td>
          <td style="width: 20%;padding-right: 10px" align="left">
        </td>
</tr>
</table>




</div>

<div id="content-show" style="padding-top:55px;padding-left: 10px;padding-right: 10px">


<!-- test case message -->
<div id="mvc-ajax-message-show" class="testcase">
<div class="testcase-h">
MVC Ajax MessageConver Show
</div>

<div class="testcase-c">
<div id="getJsonListBtn" style="margin-top: 10px"></div>
<div id="postJsonBtn" style="margin-top: 10px"></div>
<div id="getXmlListBtn" style="margin-top: 20px"> </div>
<div id="postXmlBtn" style="margin-top: 10px"> </div>
<div id="getTextListBtn" style="margin-top: 20px"> </div>
<div id="urlDiv" style="margin-top: 20px">
<select id="urlselect" >
<option value="${pageContext.request.contextPath}/user/api/list">${pageContext.request.contextPath}/user/api/list</option>
<option value="${pageContext.request.contextPath}/user/api/1/show">${pageContext.request.contextPath}/user/api/1/show</option>
<option value="${pageContext.request.contextPath}/user/api/2/show">${pageContext.request.contextPath}/user/api/2/show</option>
<option value="${pageContext.request.contextPath}/user/api/3/show">${pageContext.request.contextPath}/user/api/3/show</option>
<option value="${pageContext.request.contextPath}/user/api/showbean">${pageContext.request.contextPath}/user/api/showbean</option>]
<option value="${pageContext.request.contextPath}/user/api/showlistbean">${pageContext.request.contextPath}/user/api/showlistbean</option>
<option value="${pageContext.request.contextPath}/user/api/1/showstr">${pageContext.request.contextPath}/user/api/1/showstr</option>
<option value="${pageContext.request.contextPath}/user/api/2/showstr">${pageContext.request.contextPath}/user/api/2/showstr</option>
<option value="${pageContext.request.contextPath}/user/api/3/showstr">${pageContext.request.contextPath}/user/api/3/showstr</option>
</select>
</div>
<br/><br/>
</div>

</div>
<!-- test case message -->

<!-- test case fileupload -->

<div id="mvc-fileupload" class="testcase" style="margin-top:20px">
<div class="testcase-h">
MVC Fileupload
</div>

<div class="testcase-c">

<div id="fileupload">
		<h2>Ajax File/Form Upload/Common Upload</h2>

		<form  enctype="multipart/form-data" method="post" action="${pageContext.request.contextPath}/user/api/uploadfile" id="fileuploadForm">
			<p><label for="file">Select File : </label>

			<input type="file" name="file" id="file"/><br/><br/>
			<label for="text">Desc : </label><input type="text" name="filedesc"/>
			</p>
			<p><div id="fileUploadBtn" style="margin-top: 10px" /></p>
		</form>

	</div>

</div>
<br/><br/>
</div>

</div>
<!-- test case fileupload -->


<div id="logshow" class="draftR shadow">
<span style="margin-top: 10px;margin-left: 10px">Request Log<span/>
<div id = "result" style="margin-top: 10px;">

</div>
<span style="margin-top: 10px;margin-left: 10px">Post Log<span/>
<div id = "postResult" style="margin-top: 10px">

</div>
</div>
<script type="text/javascript">

var cacheXml=null;
var isListReq=false;

//alert(Ext.get('result').dom.innerHTML);
function showRes(res,isPost){
	//Ext.get('result').fadeOut({remove:false});
	if(isPost){
		Ext.get('postResult').dom.innerHTML=res;
		Ext.get('postResult').highlight().fadeIn();
	}else{
		Ext.get('result').dom.innerHTML=res;
		Ext.get('result').highlight().fadeIn();
	}
}


Ext.onReady(function() {


	/*var win = new Ext.Window({
		renderTo:'logshow',
		title: 'Debug'
	, width: 514
	, height: 330
	, resizable: true
	}); // End Window

	win.show();*/






	Ext.History.init();

    Ext.History.on('change', function(token){

        if(token){

            var parts = token.split(",");
            var type=parts[0];
            var title=parts[1];
            var url=parts[2];
            showLoadAjax(url,type,title);
        }
    });

    //用于刷新的时候去到那个页面或者动作
    setTimeout(function(){//延迟函数

             },1000);
    Ext.History.fireEvent('change',Ext.History.getToken());

    function postAjax(posturl,type,title,dataStr){
    	document.title=title;
		if(type=='json'){
			Core4j.ExtAjaxTextReq({
				//url:'http://127.0.0.1:8080/projectsimple/user/api/2/show',
				url:posturl,
				method:'POST',
				jsonData :dataStr,
				success:function(response, options){
					//alert("success");
					showRes(response.responseText,true);
				}
			});
		}else{
			Core4j.ExtAjaxTextReq({
				//url:'http://127.0.0.1:8080/projectsimple/user/api/2/show',
				url:posturl,
				method:'POST',
				xmlData :dataStr,
				success:function(response, options){
					//alert("success");
					showRes(response.responseText,true);
				}
			});
		}
    }


	function showLoadAjax(loadurl,type,title){
		/*document.title=title;
		Core4j.ExtAjaxReq({
			//url:'http://127.0.0.1:8080/projectsimple/user/api/2/show',
			url:loadurl+"."+type,
			success:function(response, options){
				//alert("success");
				if(type=='json'){
					showRes(response.responseText);
				}else{
					showRes(Core4j.util.xmlEncode(response.responseText));
				}
			}
		});*/

		//alert("showLoadAjax url["+loadurl+"] type["+type+"] title["+title+"]");

		if(loadurl.indexOf("user/api/list")!=-1){
			//alert("isListReq is true!");
			isListReq=true;
		}else{
			isListReq=false;
		}

		document.title=title;
		if(type=='json'){
			Core4j.ExtAjaxJsonReq({
				//url:'http://127.0.0.1:8080/projectsimple/user/api/2/show',
				url:loadurl,
				success:function(response, options){
					//alert("success");
					showRes(response.responseText);
				}
			});
		}else if(type=='xml'){
			Core4j.ExtAjaxXmlReq({
				//url:'http://127.0.0.1:8080/projectsimple/user/api/1/show',
				url:loadurl,
				success:function(response, options){
					//alert("success");
					//alert(Core4j.util.xmlToStr(response.responseXML,true));
					//alert(response.responseText);
					//Ext.get('postResult').dom.value=response.responseXML;
					cacheXml=response.responseText;
					showRes(Core4j.util.xmlToStr(response.responseXML,true));
				}
			});
		}else{
			Core4j.ExtAjaxTextReq({
				//url:'http://127.0.0.1:8080/projectsimple/user/api/2/show',
				url:loadurl,
				success:function(response, options){
					//alert("success");
					showRes(response.responseText);
				}
			});
		}
	}




	var fileUploadBtn = new Ext.Button({
		renderTo:'fileUploadBtn',
		text:'Upload'
	});

	fileUploadBtn.on('click',function(){
		Core4j.ExtAjaxTextReq({
			//url:'http://127.0.0.1:8080/projectsimple/user/api/2/show',
			form :'fileuploadForm',
			isUpload : true,
			success:function(response, options){
				//alert("success");
				showRes(response.responseText,true);
			}
		});
	});




	var btnPostJson = new Ext.Button({
		renderTo:'postJsonBtn',
		text:'PostJson'
	});

	btnPostJson.on('click',function(){
		//window.location=window.location+"#A1";
		var title="Post-Json";
		var dataStr = Ext.get('result').dom.innerHTML;
		var posturl="${pageContext.request.contextPath}/user/api/postUser";
		if(isListReq){
			posturl="${pageContext.request.contextPath}/user/api/postListUser";
		}
		//alert("post url -> "+posturl);
		postAjax(posturl,'json',title,dataStr);
		//showLoadAjax(loadurl,'json',title);
	});

	var btnPostXml = new Ext.Button({
		renderTo:'postXmlBtn',
		text:'PostXml'
	});

	btnPostXml.on('click',function(){
		//window.location=window.location+"#A1";
		var title="Post-Xml";
		var dataStr = cacheXml;
		//alert(dataStr);
		var posturl="${pageContext.request.contextPath}/user/api/postUser";
		if(isListReq){
			posturl="${pageContext.request.contextPath}/user/api/postListUser";
		}
		postAjax(posturl,'xml',title,dataStr);
		//showLoadAjax(loadurl,'json',title);
	});


	var btnText = new Ext.Button({
		renderTo:'getTextListBtn',
		text:'Get Text'
	});

	btnText.on('click',function(){
		//window.location=window.location+"#A1";
		var title="load-text";
		var loadurl=Ext.get('urlselect').dom.value;
		//Ext.History.getToken() != token
		Ext.History.add("text,"+title+","+loadurl);
		//showLoadAjax(loadurl,'json',title);
	});

	var btnJson = new Ext.Button({
		renderTo:'getJsonListBtn',
		text:'Get Json'
	});

	btnJson.on('click',function(){
		//window.location=window.location+"#A1";
		var title="load-json";
		var loadurl=Ext.get('urlselect').dom.value;
		//Ext.History.getToken() != token
		Ext.History.add("json,"+title+","+loadurl);
		//showLoadAjax(loadurl,'json',title);
	});
	var btnXml = new Ext.Button({
		renderTo:'getXmlListBtn',
		text:'Get Xml'
	});
	btnXml.on('click',function(){
		//window.location=window.location+"#A2";
		var title="load-xml";
		var loadurl=Ext.get('urlselect').dom.value;
		Ext.History.add("xml,"+title+","+loadurl);
		//showLoadAjax(loadurl,'xml',title);
	});

	/*

注意点：
1.每次调用add方法也会触发Ext.History的change事件，不光是浏览器的前进后退按钮；
2.页面初始化时必须要能触发你需要记录的事件或者是直接调用第三步所写的方法，否则你就回不到起始页了
3.Ext.History有back() 和forward()方法来实现浏览器的前进和后退，刷新的话可以调用以下代码：

Js代码
1.Ext.History.fireEvent('change',Ext.History.getToken());

	*/


/*
    var items= [
            {
                title  : 'North',
                region : 'north',
                html   : 'North',
                ctitle : 'North',
                margins: '5 5 0 5',
                height : 70
            },
            {
                title       : 'South',
                region      : 'south',
                html        : 'South',
                collapseMode: 'mini',
                margins     : '0 5 5 5',
                height      : 70
            },
            {
                title       : 'West',
                region      : 'west',
                html        : 'West',
                collapseMode: 'mini',
                margins     : '0 0 0 5',
                width       : 100
            },
            {
                title  : 'East',
                region : 'east',
                html   : 'East',
                margins: '0 5 0 0',
                width  : 100
            },
            {
                title      : 'Center',
                region     : 'center',
                collapsible: false,
                html       : 'Center'
            }
        ];
    //Ext.createWidget('panel',objconfig)等同于Ext.create('Ext.Panel',objconfig);
    Ext.createWidget('panel', {
    	renderTo: 'content-show',
        width : 800,//‘100%’
        height: 800,

        //x: 690,
        //y: 260,

        title : 'BorderLayout Panel',
        layout: 'border',

        defaults: {
            collapsible: true,
            split      : true
        },
        items: items
    });
*/
	/*new Ext.container.Viewport({
		renderTo: 'content-show',//Viewport 的 renderTo无效
		//applyTo:'content-show' 类似 renderTo
	    layout: 'border',
	    items: [{
		    id:'west',
	        region: 'west',
	        title: 'Navigation',
	        width: 300,
	        collapsible: true,
	        collapseMode: "mini",
	        split: true

           // shadow: "drop",
          //  bodyBorder: true,
           // border: true,
         //   floatable: true,
         //   maskDisabled: true


	        // the west region might typically utilize a TreePanel or a Panel with Accordion layout
	    },  {
	    	id:'center',
	        region: 'center',
	        title: 'Title for the Grid Panel',
	        html: 'The first tab\'s content. Others may be added dynamically'
	    }]
	});*/

});
</script>


<div id="leg-show" class="draftleg" style="padding-top: 10px">
<%
session.setAttribute("serverInfo",session.getServletContext().getServerInfo());

%>

<table border="0" cellpadding="0" width="100%">
<tr >
        <td style="width:50%;padding-left: 10px" align="left">
        ${serverInfo}
        </td>
        <td style="width:50%;padding-right: 10px" align="right">
        <a href="http://www.link-wings.com" target="_blank">Link Wings Interactive Inc. ©2011</a>
        </td>
</tr>
</table>




</div>


<form id="history-form" class="x-hidden">
    <input type="hidden" id="x-history-field" />
    <iframe id="x-history-frame"></iframe>
</form>


</body>
</html>